<template>
  <div class="sample-detail">
    <GoBack></GoBack>
    <div class="show-block">
      <iframe
        src="https://720yun.com/t/f43jvrwfuv2?scene_id=18255020&from=singlemessage"
        frameborder="0"
        style="width: 110%; height: 125%"
      ></iframe>
    </div>
    <div class="bottom-mask-block">
      <span>{{sample.houseType}}户型&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
      <span>花费 &yen;{{sample.spend}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
      <span>{{getStyle(sample.style)}}</span>
    </div>
    <div class="co-block">
      <img src="../assets/logo.png" alt="">
      <span>福建茗吉尔建筑装饰有限公司</span>
    </div>
  </div>
</template>

<script>
import { } from 'vux'
import GoBack from './public/go-back'

export default {
  components: {
    GoBack
  },
  data () {
    return {
      sampleId: this.$route.params.sampleId,
      sample: null
    }
  },
  created () {
    this.getSample()
  },
  watch: {

  },
  methods: {
    getSample () {
      this.$http.get('/sample/getSample?id=' + this.sampleId).then(res => {
        this.sample = res.body.response
        if (this.sample.houseType !== null) {
          if (this.sample.houseType === true) {
            this.sample.houseType = '小型'
          } else {
            switch (this.sample.houseType) {
              case 2:
                this.sample.houseType = '中型'
                break
              case 3:
                this.sample.houseType = '大型'
                break
              case 4:
                this.sample.houseType = '复试'
                break
              case 5:
                this.sample.houseType = '别墅'
                break
            }
          }
        }
      })
    },
    getStyle (style) {
      switch (style) {
        case 1:
          return '田园风'
        case 2:
          return '现代风'
        case 3:
          return '简约风'
        case 4:
          return '欧美风'
        case 5:
          return '中国风'
        case 6:
          return '复古风'
      }
    }
  }
}
</script>

<style lang="less">
.sample-detail {
  .show-block {
    position: relative;
    width: 90vw;
    height: 120vw;
    margin: 12vw 5vw 0 5vw;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 15px @theme-shadow-color;
    iframe {
      position: absolute;
      top: -15vw;
      left: 0;
      border-radius: 15px;
    }
  }
  .bottom-mask-block {
    padding-top: 3vw;
    width: 86vw;
    margin: 7vw auto;
    color: @bg-font-color;
    line-height: 10vw;
    border-top: 1px solid @bg-font-vice-color;
    text-align: center;
  }
  .co-block {
    text-align: center;
    img {
      width: 10vw;
      height: 10vw;
      border-radius: 10px;
    }
    span {
      display: inline-block;
      color: @theme-color;
      margin-left: 2vw;
      font-size: 5vw;
      transform: translate3d(0, -3vw, 0);
    }
  }
}
</style>
